// 引入 react 依赖
import React, { Component } from 'react';
import { Text, View, TouchableOpacity, StyleSheet, TextInput, Button,InteractionManager } from 'react-native';


class List extends Component {

    constructor(props) {
        super(props)
        this.state = {
            data: props.data,
        }
    }

    render() {
        const { data, } = this.state;
        const { add, remove, change } = this.props;
        return (
            <View style={{}}>
                {data.map((item, index) => {
                    return (
                        <View style={{ flexDirection: 'row', alignItems: 'center', }} key={index}>
                            <View style={{}}>
                                <TextInput
                                    defaultValue={item.name}
                                    onChangeText={(value) => {
                                        console.log(value)
                                        let newData = [...data]
                                        newData[index].name = value
                                        this.setState({
                                            data: newData
                                        })
                                        if (change) {
                                            change(newData)
                                        }
                                    }}
                                    placeholder="请输入名称"
                                />
                            </View>
                            <View style={{}}>
                                <TextInput
                                    defaultValue={item.price}
                                    onChangeText={(value) => {
                                        console.log(value)
                                        let newData = [...data]
                                        newData[index].price = value
                                        this.setState({
                                            data: newData
                                        })
                                        if (change) {
                                            change(newData)
                                        }
                                    }}
                                    placeholder="请输入价格"
                                />
                            </View>
                            <View style={{}}>
                                <TextInput
                                    defaultValue={item.inventory}
                                    onChangeText={(value) => {
                                        console.log(value)
                                        let newData = [...data]
                                        newData[index].inventory = value
                                        this.setState({
                                            data: newData
                                        })
                                        if (change) {
                                            change(newData)
                                        }
                                    }}
                                    placeholder="请输入库存"
                                />
                            </View>
                            <Button onPress={() => {
                                let minData = [...data]
                                minData.splice(index, 1)
                                this.setState({
                                    data: minData
                                }, () => {
                                    if (remove) {
                                        remove(minData)
                                    }
                                })
                            }} title="删除" />
                        </View>
                    )
                })}
                <Button onPress={() => {
                    let addData = [...data]
                    let cellData = {}
                    for (let attr in addData[0]) {
                        cellData[attr] = ''
                    }
                    addData.push(cellData)
                    this.setState({
                        data: addData
                    }, () => {
                        if (add) {
                            add(addData)
                        }
                    })
                }} title="添加" />
            </View>
        )
    }
}

export default List
